<script setup>
	import { ref } from "vue"
	import { getNavBarHeight } from "@/utils/system.js"
	import { getUserInfoAPI } from "@/api/user.js"

	// 用户信息
	const loading = ref(false)
	const userInfo = ref({})
	const getUserInfo = async () => {
		loading.value = true
		try {
			const { data } = await getUserInfoAPI()
			userInfo.value = data
		} finally {
			loading.value = false
		}
	}
	getUserInfo()

	// #ifndef MP-WEIXIN
	// 拨打电话
	const onContact = () => {
		uni.makePhoneCall({ phoneNumber: 18888888888 })
	}
	// #endif
</script>

<template>
	<view class="user-container page-bg">
		<view :style="{height:getNavBarHeight() + 'px'}"></view>
		<!-- 加载状态 -->
		<view class="loading-box" v-if="loading">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<!-- 用户信息 -->
		<view class="user-info" v-else>
			<image class="avatar" src="../../static/images/logo.png" mode="aspectFill"></image>
			<view class="ip">{{userInfo.IP}}</view>
			<view class="address">来自于：{{userInfo.address?.city||userInfo.address?.province||userInfo.address?.country}}</view>
		</view>
		<!-- 操作列表 -->
		<view class="section">
			<navigator class="row" url="/pages/classify-list/classify-list?name=我的下载&type=download" :render-link="false">
				<view class="left">
					<uni-icons type="download-filled" size="20"></uni-icons>
					<view class="text">我的下载</view>
				</view>
				<view class="right">
					<view class="text">{{userInfo.downloadSize}}</view>
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</navigator>
			<navigator class="row" url="/pages/classify-list/classify-list?name=我的评分&type=score" :render-link="false">
				<view class="left">
					<uni-icons type="star-filled" size="20"></uni-icons>
					<view class="text">我的评分</view>
				</view>
				<view class="right">
					<view class="text">{{userInfo.scoreSize}}</view>
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</navigator>
			<view class="row">
				<view class="left">
					<uni-icons type="chatboxes-filled" size="20"></uni-icons>
					<!-- #ifdef MP-WEIXIN -->
					<view class="text">联系客服</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view class="text">拨打电话</view>
					<!-- #endif -->
				</view>
				<view class="right">
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信客服 -->
				<button class="contact" open-type="contact">联系客服</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<!-- 拨打电话 -->
				<button class="contact" @click="onContact">拨打电话</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- 操作列表 -->
		<view class=" section">
			<navigator class="row" url="/pages/notice/detail?name=订阅更新&id=65361e318b0da4ca084e3ce0" :render-link="false">
				<view class="left">
					<uni-icons type="notification-filled" size="20"></uni-icons>
					<view class="text">订阅更新</view>
				</view>
				<view class="right">
					<view class="text"></view>
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</navigator>
			<navigator class="row" url="/pages/notice/detail?name=常见问题&id=6536358ce0ec19c8d67fbe82" :render-link="false">
				<view class="left">
					<uni-icons type="help-filled" size="20"></uni-icons>
					<view class="text">常见问题</view>
				</view>
				<view class="right">
					<view class="text"></view>
					<uni-icons type="right" size="15" color="#aaa"></uni-icons>
				</view>
			</navigator>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.user-info {
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
		}

		.ip {
			color: #333;
			font-size: 44rpx;
			margin: 20rpx 0 5rpx;
		}

		.address {
			font-size: 28rpx;
			color: #aaa;
		}
	}

	.section {
		width: 690rpx;
		margin: 50rpx auto;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		background-color: #fff;

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 100rpx;
			border-bottom: 1px solid #eee;
			position: relative;

			&:last-child {
				border-bottom: none;
			}

			.left {
				display: flex;
				align-items: center;

				:deep(.uni-icons) {
					color: $primary-color !important;
				}

				.text {
					color: #666;
					padding-left: 16rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					color: #aaa;
				}
			}

			.contact {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
			}
		}
	}
</style>